<script lang="tsx" setup>
import dayjs from 'dayjs'
import LeftTitle from '@/components/basic/LeftTitle.vue'
import DataTitle from '@/components/basic/DataTitle.vue'
import RightTitle from '@/components/basic/RightTitle.vue'
import ChargeCabinetImg from '@/assets/images/charge-cabinet.png'
import IcChargeCabinetImg from '@/assets/images/ic_charge_cabinet.png'
import StopSwitchImg from '@/assets/images/stop-switch.png'
import LightImg from '@/assets/images/light.png'
import { queryChargingStationDetailInfo } from '@/api/chargebattery'
import { getToken } from '@/utils/cache/cookies'
import { useRoute, useRouter } from 'vue-router'
import { queryChargingStationDetailInfoResponseData } from '@/api/chargebattery/types/chargebattery'
import { onMounted, ref } from 'vue'
import ChargeBattery from '@/components/basic/ChargeBattery.vue'
import { Column } from 'element-plus'
const route = useRoute()
const data = ref<queryChargingStationDetailInfoResponseData | null>(null)
const getData = async () => {
  try {
    const res = await queryChargingStationDetailInfo({
      token: getToken() ?? '',
      produceId: route.query.produceId as string,
      channel: 'Service',
    })
    data.value = res.resultData
  } catch (error) {
    console.error(error)
  }
}
const getLeftTableCol: () => Column<any>[] = () => {
  return [
    {
      key: 'other-box-boxCode',
      dataKey: 'boxCode',
      title: '电柜编号',
      width: 200,
      align: 'center',
    },
    {
      key: 'other-box-batteryCount',
      dataKey: 'batteryCount',
      title: '电池数量',
      width: 200,
      align: 'center',
    },
    {
      key: 'other-box-charge',
      dataKey: 'charge',
      title: '充电中电池',
      width: 250,
      align: 'center',
    },
    {
      key: 'other-box-info',
      dataKey: 'boxId',
      title: '操作',
      width: 250,
      align: 'center',
      cellRenderer: ({ cellData: data }) => {
        return (
          <span class="cursor-pointer" onClick={() => handleClick(data)}>
            查看
          </span>
        )
      },
    },
  ]
}
const router = useRouter()
const handleClick = (data: any) => {
  console.log(data)
  router.replace({
    name: 'ChargeCabinetInfo',
    query: {
      produceId: data,
    },
  })
  // nextTick(async () => {
  //   await getData()
  // })
}
const getRightTableCol: () => Column<any>[] = () => {
  return [
    {
      key: 'battery-details-doorId',
      dataKey: 'doorId',
      title: '仓门',
      width: 100,
      align: 'center',
    },
    {
      key: 'battery-details-charge',
      dataKey: 'charge',
      title: '充电状态',
      width: 140,
      align: 'center',
    },
    {
      key: 'battery-details-doorStatus',
      dataKey: 'doorStatus',
      title: '仓门状态',
      width: 150,
      align: 'center',
    },
    {
      key: 'battery-details-capacity',
      dataKey: 'capacity',
      title: '充电功率',
      width: 140,
      align: 'center',
    },
    {
      key: 'battery-details-voltage',
      dataKey: 'voltage',
      title: '充电电压',
      width: 140,
      align: 'center',
    },
    {
      key: 'battery-details-current',
      dataKey: 'current',
      title: '充电电流',
      width: 140,
      align: 'center',
    },
    {
      key: 'battery-details-duration',
      dataKey: 'duration',
      title: '充电时长',
      width: 200,
      align: 'center',
    },
  ]
}
/** 网络状态转换 */
const formatOnlineStatus = (status?: string) => {
  switch (status) {
    case '0':
      return '断网'
    case '1':
      return '联网'
    default:
      return '未知'
  }
}
onMounted(() => {
  getData()
})
</script>

<template>
  <div class="charge-cabinet-info">
    <div class="charge-cabinet-info__left">
      <left-title />
      <div flex flex-col mt-50 rounded-10 p-20 flex-1 class="content-border">
        <div flex flex-col mt-50>
          <data-title title="电柜信息" eg-title="ELECTRICAL CABINET INFORMATION" />
          <div class="other-box-container">
            <div text-align-start>
              设备编号 : <span>{{ data?.box.boxCode }}</span>
            </div>
            <div text-align-start>
              设备位置 : <span>{{ data?.box.address }}</span>
            </div>
            <div text-align-start>
              网络状态 : <span>{{ formatOnlineStatus(data?.box.networkStatus) }}</span>
            </div>
            <div text-align-start>
              状态更新时间:
              <span>{{ dayjs(data?.box.updatedTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </div>
          </div>
        </div>
        <div flex flex-col mt-50>
          <data-title title="充电时长" eg-title="CHARGING TIME" />
          <div class="charging-time-container">
            <div flex items-center v-for="(item, index) in data?.duration" :key="index" mb-50>
              <span mr-40>{{ item.label }}</span>
              <el-progress
                :percentage="+item.percent"
                :show-text="false"
                color="#00E6FF"
                flex-1
                mr-40
              />
              <span>{{ item.value }}</span>
            </div>
          </div>
        </div>
        <div flex flex-col mt-50 flex-1>
          <data-title title="其他电柜" eg-title="OTHER ELECTRICAL CABINETS" />
          <div mt-20 h-600>
            <el-auto-resizer>
              <template #default="{ height, width }">
                <el-table-v2
                  header-class="table-v2-data-header"
                  :columns="getLeftTableCol()"
                  :data="data?.otherBox ?? []"
                  :width="width"
                  :height="height"
                  :header-height="80"
                  :row-height="80"
                  :fixed="true"
                />
              </template>
            </el-auto-resizer>
          </div>
        </div>
      </div>
    </div>
    <div class="charge-cabinet-info__center">
      <div class="charge-cabinet-container">
        <!-- <div class="image-container" /> -->
        <div class="image-container">
          <img :src="ChargeCabinetImg" alt="" />
          <div class="image-container__mask">
            <div class="cabinet-left">
              <img :src="IcChargeCabinetImg" alt="" />
              <img mt-48 :src="LightImg" alt="" />
              <img mt-68 :src="StopSwitchImg" alt="" />
              <span class="mt-5 text-[20px]">急停开关</span>
              <div mt-56 flex flex-col items-center>
                <div class="circuit-breaker-switch-content">
                  <div>
                    <span>一层</span>
                    <div class="switch-content">
                      <el-switch />
                    </div>
                  </div>
                  <div>
                    <span>二层</span>
                    <div class="switch-content">
                      <el-switch />
                    </div>
                  </div>
                  <div>
                    <span>三层</span>
                    <div class="switch-content">
                      <el-switch />
                    </div>
                  </div>
                  <div>
                    <span>四层</span>
                    <div class="switch-content">
                      <el-switch />
                    </div>
                  </div>
                </div>
                <span class="mt-5 text-[20px]">断路开关</span>
              </div>
            </div>
            <div class="cabinet-right">
              <charge-battery
                v-for="item in data?.doorDetail"
                :key="item.doorId"
                :level="item.power"
                status="0"
                :empty="item.empty"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="charge-cabinet-info__right">
      <right-title />
      <div flex flex-col mt-50 rounded-10 p-20 flex-1 class="content-border">
        <div flex flex-col mt-50 flex-1>
          <data-title title="电柜详情" eg-title="ELECTRICAL CABINET DETAILS" />
          <div mt-20 flex-1>
            <el-auto-resizer>
              <template #default="{ height, width }">
                <el-table-v2
                  header-class="table-v2-data-header"
                  :columns="getRightTableCol()"
                  :data="data?.doorDetail ?? []"
                  :width="width"
                  :height="height"
                  :header-height="80"
                  :row-height="80"
                  :fixed="true"
                />
              </template>
            </el-auto-resizer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.charge-cabinet-info {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 10;
  &__left {
    width: 26%;
    height: 95%;
    padding: 100px 50px;
    display: flex;
    flex-direction: column;
  }
  &__right {
    width: 30%;
    height: 95%;
    padding: 100px 50px;
    display: flex;
    flex-direction: column;
    &__title {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 36px;
      line-height: 42px;
    }
  }
}
.other-box-container {
  font-size: 28px;
  padding: 50px;
  > div + div {
    margin-top: 20px;
  }
}
.charging-time-container {
  font-size: 20px;
  padding: 50px;
  > div + div {
    margin-top: 20px;
  }
}
:deep(.battery-compartment-info-header) {
  background: linear-gradient(to right, #132239 0%, #1b75ff 51%, rgba(19, 34, 57, 0.22) 100%);
  font-size: 28px;
  border-image: linear-gradient(
      90deg,
      rgba(5, 14, 32, 1),
      rgba(72, 172, 255, 1),
      rgba(5, 14, 32, 1)
    )
    2 2;
  border: 2px solid;
  border-left: 0;
  border-right: 0;
}
.charge-cabinet-info__center {
  width: 44%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.charge-cabinet-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 30px;
  color: #fff;
  background-image: url(/src/assets/images/circle.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.image-container {
  position: relative;
  &__mask {
    position: absolute;
    left: 0px;
    top: 45px;
    width: 100%;
    height: calc(100% - 45px);
    display: flex;
  }
  > img {
    width: 100%;
    height: 100%;
  }
}
.cabinet-left {
  width: 19%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cabinet-right {
  width: 81%;
  height: 100%;
  padding: 20px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.circuit-breaker-switch-content {
  border-radius: 8px;
  border: 2px solid #fff;
  display: flex;
  flex-direction: column;
  > div {
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    border-bottom: 2px solid #fff;
    display: flex;
    span {
      writing-mode: vertical-rl;
      display: inline-block;
      letter-spacing: 10px;
      font-size: 20px;
      padding: 16px;
      padding-bottom: 0px;
    }
  }
  > div:last-child {
    border-bottom: none;
  }
  .switch-content {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 2px solid #fff;
    padding: 0px 16px;
  }
}
:deep(.el-progress-bar__outer) {
  --el-border-color-lighter: #0f3557;
}
:deep(.other-box-data-header) {
  background: linear-gradient(to right, #132239 0%, #1b75ff 51%, rgba(19, 34, 57, 0.22) 100%);
  font-size: 28px;
  border-image: linear-gradient(
      90deg,
      rgba(5, 14, 32, 1),
      rgba(72, 172, 255, 1),
      rgba(5, 14, 32, 1)
    )
    2 2;
  border: 2px solid;
  border-left: 0;
  border-right: 0;
}
:deep(.el-table tr) {
  --el-table-tr-bg-color: transparent;
}
</style>
